export const createResponsiveStyles = (deviceInfo: {
  width: number
  height: number
  isTablet: boolean
  isSmallPhone: boolean
  isLargePhone: boolean
  orientation: "portrait" | "landscape"
}) => {
  const { width, isTablet, isSmallPhone, orientation } = deviceInfo

  // iPhone 16 尺寸: 393x852
  const isIPhone16 = width >= 390 && width <= 400

  // 基础间距
  const spacing = {
    xs: isSmallPhone ? 4 : isIPhone16 ? 8 : 8,
    sm: isSmallPhone ? 8 : isIPhone16 ? 12 : 12,
    md: isSmallPhone ? 12 : isIPhone16 ? 16 : 16,
    lg: isSmallPhone ? 16 : isIPhone16 ? 20 : 24,
    xl: isSmallPhone ? 24 : isIPhone16 ? 24 : 32,
    xxl: isSmallPhone ? 32 : isIPhone16 ? 32 : 48,
  }

  // 字体大小
  const fontSize = {
    xs: isSmallPhone ? 10 : isIPhone16 ? 11 : 12,
    sm: isSmallPhone ? 12 : isIPhone16 ? 13 : 14,
    md: isSmallPhone ? 14 : isIPhone16 ? 15 : 16,
    lg: isSmallPhone ? 16 : isIPhone16 ? 17 : 18,
    xl: isSmallPhone ? 20 : isIPhone16 ? 22 : 24,
    xxl: isSmallPhone ? 24 : isIPhone16 ? 28 : 32,
    title: isSmallPhone ? 32 : isIPhone16 ? 36 : isTablet ? 56 : 48,
  }

  // 组件尺寸
  const sizes = {
    button: isSmallPhone ? 40 : isIPhone16 ? 44 : 48,
    input: isSmallPhone ? 40 : isIPhone16 ? 44 : 48,
    card: isSmallPhone ? 12 : isIPhone16 ? 14 : 16,
    header: isSmallPhone ? 24 : isIPhone16 ? 28 : 32,
  }

  // 网格列数
  const gridCols = {
    stats: isTablet ? 4 : 2, // iPhone 16使用2列
    devices: 1, // 设备列表单列
    projects: 1, // 项目列表单列
  }

  // 容器宽度
  const containerPadding = isTablet ? spacing.xxl : isIPhone16 ? spacing.md : spacing.lg

  return {
    spacing,
    fontSize,
    sizes,
    gridCols,
    containerPadding,
    isLandscape: orientation === "landscape",
    isIPhone16,
  }
}
